let VSHADER_SOURCE =
    'attribute vec4 a_Position;\n' +
    'attribute vec2 a_TexCoord;\n' +
    'varying vec2  v_TexCoord;\n' +
    'void main() {\n' +
    ' gl_Position = a_Position;\n' +
    ' v_TexCoord = a_TexCoord;\n' +
    '}\n';

let FSHADER_SOURCE =
    'precision mediump float;\n' +
    'uniform sampler2D u_Sampler;\n' +
    'varying vec2 v_TexCoord;\n' +
    'void main() {\n' +
    ' gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n' +
    '}\n';

function main() {
    let canvas = document.getElementById('webgl');

    let gl = getWebGLContext(canvas);
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to initialize shaders');
        return;
    }

    let n = initVertexBuffers(gl);
    if (n < 0) {
        console.log('Failed to set the positions of the vertices');
        return;
    }

    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    // 配置纹理
    if (!initTextures(gl, n)) {
        console.log('Failed to intialize the texture');
        return;
    }
}

function initVertexBuffers(gl) {
    let verticesTexCoords = new Float32Array([
        //顶点坐标、纹理坐标
        -0.5, 0.5, 0.0, 1.0,
        -0.5, -0.5, 0.0, 0.0,
        0.5, 0.5, 1.0, 1.0,
        0.5, -0.5, 1.0, 0.0,
    ]);
    let n = 4;

    let vertexTexCoordBuffer = gl.createBuffer();
    if (!vertexTexCoordBuffer) {
        console.log('Failed to create the buffer object');
        return -1;
    }
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);

    let fSize = vertexTexCoordBuffer.BYTES_PER_ELEMENT;

    let a_Position = getAttribLocation(gl, 'a_Position');
    if (a_Position < 0) { return; }
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, fSize * 4, 0);
    gl.enableVertexAttribArray(a_Position);

    let a_TexCoord = getAttribLocation(gl, 'a_TexCoord');
    if (a_TexCoord < 0) { return; }
    gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, fSize * 4, fSize * 2);
    gl.enableVertexAttribArray(a_TexCoord);

    return n;
}

function initTextures(gl, n) {
    // 创建纹理对象
    let texture = gl.createTexture();
    if (!texture) {
        console.log('Failed to create the texture object');
        return;
    }

    // 获得u_Sampler的存储位置
    let u_Sampler = getUniformLocation(gl, 'u_Sampler');
    if (!u_Sampler) return;

    // 创建一个image对象
    let image = new Image();
    if (!image) {
        console.log('Failed to create the image object');
        return;
    }

    // 注册图像加载事件
    image.onload = function () { loadTexture(gl, n, texture, u_Sampler, image); };
    image.onerror = function () { console.error('Failed to load image'); };
    // image.src = '../../resources/sky.jpg';
    image.src = 'D:/project/js/WebGL_Learn/resources/sky.jpg';
    return true;
}

function loadTexture(gl, n, texture, u_Sampler, image) {
    // 对纹理图像进行y轴反转
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    // 开启0号纹理单元
    gl.activeTexture(gl.TEXTURE0);
    // 向target绑定纹理对象
    gl.bindTexture(gl.TEXTURE_2D, texture);

    // 配置纹理参数
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    // 配置纹理图像
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);

    // 将0号纹理传递给着色器
    gl.uniformli(u_Sampler, 0);

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
}

function getAttribLocation(gl, name) {
    let p = gl.getAttribLocation(gl.program, name);
    if (p < 0) {
        console.error('Failed to get the storage location of', name);
    }
    return p;
}

function getUniformLocation(gl, name) {
    let p = gl.getUniformLocation(gl.program, name);
    if (p == 0) {
        console.error('Failed to get the storage location of', name);
    }
    return p;
}